<template>
  <com-card>
    <div slot="com_header">
      <el-row>
        <el-alert
          title="注意:只允许为三级分类设置参数"
          type="warning"
          show-icon:closable="false"
        ></el-alert>
      </el-row>
    </div>
    <div slot="com_content">
      <!-- 级联列表 -->
      <el-row>
        <span class="demonstration">请选择分类</span>
        <el-cascader
          v-model="value"
          :options="typelist"
          :props="{
            expandTrigger: 'hover',
            label: 'cat_name',
            value: 'cat_id',
          }"
          @change="handleChange"
          size="small"
        ></el-cascader>
      </el-row>
      <!-- 列表 -->
      <el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="动态参数" name="many">
            <el-table :data="tableData" border>
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column label="参数名称">
                <template #default="{ row }">
                  <div v-show="!row.flag">{{ row.attr_name }}</div>
                  <el-input
                    type="text"
                    v-model="row.attr_name"
                    v-show="row.flag"
                    size="small"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot="header">
                  <el-button type="primary" @click="add">添加</el-button>
                </template>
                <el-table-column label="操作">
                  <template #default="{ row }">
                    <el-button type="primary" @click="updata(row)" size="small">
                      {{ row.flag ? "完成" : "修改" }}
                    </el-button>
                    <el-button type="danger" @click="del(row)" size="small"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 静态 -->
          <el-tab-pane label="静态属性" name="only">
            <el-table :data="tableData" border>
              <el-table-column type="index" label="序号"> </el-table-column>
              <el-table-column label="参数名称">
                <template #default="{ row }">
                  <div v-show="!row.flag">{{ row.attr_name }}</div>
                  <el-input
                    type="text"
                    v-model="row.attr_name"
                    v-show="row.flag"
                    size="small"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="添加">
                <template slot="header">
                  <el-button type="primary" @click="add">添加</el-button>
                </template>
                <el-table-column label="操作">
                  <template #default="{ row }">
                    <el-button type="primary" @click="updata(row)" size="small">
                      {{ row.flag ? "完成" : "修改" }}
                    </el-button>
                    <el-button type="danger" @click="del(row)" size="small"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <!-- 添加 -->
      <el-dialog title="提示" :visible.sync="tianjia" width="30%">
        <el-form :modal="abcObj">
          <el-form-item label="参数名称">
            <el-input v-model="abcObj.attr_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="tianjia = false">取 消</el-button>
          <el-button type="primary" @click="addtianjia">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </com-card>
</template>
<!--  attr_id: 3077
attr_name: "版式"
attr_sel: "many"
attr_vals: "49吋4K超薄曲面 人工智能,55吋4K观影曲面 30核HDR,55吋4K超薄曲面 人工智能,65吋4K超薄曲面 人工智能"
attr_write: "list"
cat_id: 6
delete_time: null
flag: false
-->
<script>
import {
  api_categories,
  api_attres,
  api_add,
  api_uptpu,
  api_del_delete,
} from "../../api/goods.js";
import ComCard from "../../components/comCard";
export default {
  components: {
    ComCard,
  },
  data() {
    return {
      fenleilist: {
        type: [],
        pagenum: "",
        pagesize: "",
      },
      typelist: [], //输入框的数据源
      value: [], //与输入框实现数据双向绑定
      //控制tab项,与tab-pane的name属性值对应
      activeName: "many",
      objpar: {
        id: "",
        sel: "many",
      },
      //表格
      tableData: [],
      //添加弹窗
      tianjia: false,
      //添加
      abcObj: {
        id: "",
        attr_name: "",
        attr_sel: "",
        attr_vals: "",
      },
      attr_name: "", //添加参数名称
    };
  },
  methods: {
    async query() {
      let rst = await api_categories(this.fenleilist);
      this.typelist = rst.data;
      console.log(rst);
    },
    //点击tab切换触发的方法
    handleClick(tab, event) {
      if (tab.index == 0) {
        this.sel = "many";
      } else {
        this.sel = "only";
      }
      if (this.value - 1) {
        this.handleChange(this.value);
      }
    },
    //列表
    async handleChange(value) {
      this.objpar.id = value[value.length - 1];
      let rst = await api_attres(this.objpar);
      console.log(rst);
      if (rst.data) {
        this.tableData = rst.data.map((item) => {
          item.flag = false;
          return item;
        });
      }
    },
    //添加
    add() {
      this.abcObj = { id: "", attr_name: "", attr_sel: "", attr_vals: "" };
      let { id, sel } = this.objpar;
      this.abcObj.id = id;
      this.abcObj.attr_sel = sel;
      this.tianjia = true;
    },
    //添加弹窗确定按钮
    async addtianjia() {
      let rst = await api_add(this.abcObj);
      let { msg, status } = rst.meta;
      console.log(rst);
      if ((status == 201) | (status == 404)) {
        this.$message.success(msg);
        this.tianjia = false;
        this.handleChange(this.value);
      }
    },
    //编辑
    async updata(row) {
      row.flag = !row.flag;
      console.log(row);
      if (row.flag== false) {
        let edits = {
          id: this.value[2],
          attrId: row.attr_id,
          attr_name: row.attr_name,
          attr_sel: row.attr_sel,
        };
        let rst = await api_uptpu(edits);
        console.log(rst);
        let { msg, status } = rst.meta;
        if (status == 200) {
          this.$message.success(msg);
        }
      }
    },
    //删除
    del(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(
        async () => {
          let data = { attrid: row.attr_id, id: row.cat_id };
          let rst = await api_del_delete(data);
          let { status, msg } = rst.meta;
          if (status == 200) {
            this.$message.success(msg);
            this.query();
            this.handleChange(this.value);
          }
        },
        () => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        }
      );
    },
  },
  mounted() {
    this.query();
  },
};
</script>

<style lang="less" scoped>
</style>